.container {
	background-color: #000;
  height: 100vh;
  padding-bottom: 100px;
  padding-top: 40px;
}


.click_cut {
  animation: fadeInOut1 0.5s linear both;
}

.click_cut2 {
  animation: fadeInOut2 0.5s linear both;
}

.detailtitle {
  display: flex;
  width: 100%;
  height: 114rpx;
  line-height: 94rpx;
  color: #000;
  margin-top: 44px;
  position: absolute;
  z-index: 9999;
  margin-bottom: 100px;
}


.userinfo-avatar {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo {
  position: absolute;
  width: 350rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 230rpx;
  left: 230px;
}

.avatarpic {

  position: absolute;

  left: 220px;
}


.detailtitle {
  display: flex;
  width: 100%;
  height: 114rpx;
  line-height: 94rpx;
  color: #000;
  margin-top: 44px;
  position: absolute;
  z-index: 9999;
  margin-bottom: 100px;

}

.titletext {

  opacity: 1;
  height: 50rpx;
  color: white;
  font-size: 32rpx;
  width: 100%;
  position: fixed;
  bottom: 60rpx;


}


.playing {
  animation: rotate2d 2s linear infinite;
  -webkit-animation: rotate2d 2s linear infinite;
}

.control {
  opacity: 1;
  height: 50rpx;
  color: white;
  font-size: 32rpx;
  width: 7%;
  position: fixed;
  padding-left: 30rpx;
  right: 12rpx;
  top: 10%;
  background-size: contain;
  background-image: url("");


}

.play {

  opacity: 1;
  height: 50rpx;
  color: white;
  font-size: 32rpx;
  width: 7%;
  position: fixed;
  padding-left: 30rpx;
  right: 12rpx;
  top: 10%;

}

@keyframes rotate2d {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}


@keyframes fadeInOut1 {
  from {
    opacity: 0.7;
  }


  to {
    opacity: 1;
  }
}

@keyframes fadeInOut2 {
  from {
    opacity: 1;
  }


  to {
    opacity: 0.7;
  }
}

.foreground {
  position: absolute;
  bottom: -20px;
  width: 100vw;
  height: 17.5rem;
  background-size: 100% 100%;
  z-index: 20;
}

.center {
  padding-top: 35vw;
  img.classesImg {
    width: 80vw;
    height: 80vw;
    margin: 0 auto;
    display: block;
  }
}



.classesImg {
  // animation: pulse 2s infinite;
  /* 设置动画为2秒钟的时间，并无限循环 */

}

@keyframes rotateDoor {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    /* 这里可以添加一些中间状态，如透明度变化等 */
  }

  100% {
    transform: rotateY(180deg);
    /* 假设你想要门完全翻转 */
  }
}

.left {
  animation: rotateDoor 3s ease-in-out forwards infinite;
  transform-origin: left;
  /* 从左侧开始旋转 */
}

.right {
  animation: rotateDoor 1s ease-in-out reverse forwards;
  transform-origin: right;
  /* 从右侧开始反向旋转 */
}

.reward {
  width: 80rpx;
  height: 80rpx;
  border-radius: 250px;
  background-color: #fff;
  float: left;
  z-index: 999;
  margin-right: 30rpx;
}

.icon {
  width: 30rpx;
  height: 60rpx;
  float: left;
  margin-top: 10rpx;
}


.qiqiu {
  position: absolute;
  top: 140rpx;
  left: 60rpx;
  width: 190rpx !important;
  height: 190rpx !important;
}

.xiaoji {
  position: absolute;
 bottom: 240rpx;
  left: 20rpx;
  width: 140rpx !important;
  height: 140rpx !important;
}

.girl {
  position: absolute;
  bottom: 240rpx;
  right: 60rpx;
  width: 260rpx !important;
  height: 300rpx !important;
}

.train {
  width: 100% !important;
  height: 300rpx !important;
  margin-top: 10vh;
}

.flower {
  position: absolute;
  bottom: 0rpx;
  left: 0;
  width: 100% !important;
  height: 360rpx !important;
}
.title {
  font-size: 40px;
  text-align: center;
  color: #ff6200;
  margin-top: 3vh;
  padding: 20rpx;
  font-weight: bold;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
